خصوصیت display:

توسط این خصوصیت میتوانیم نمایش یا عدم نمایش یا حالت نمایش را برای یک تگ تغییر دهیم.مقادیر زیر را میگیرد

  display: inline;
  display: block;
  display: block;

در مثال زیر تمام تگ های لینک را مخفی میکنیم

span {
  display: none;
}

 

CSS Layout

ویژگی position نوع روش موقعیت یابی مورد استفاده برای یک عنصر (استاتیک، نسبی، ثابت، مطلق یا چسبنده) را مشخص می کند.تمام این مثال ها را باید جدا اجرا و خروجی را مشاهده کنید.از این خصوصیت در طراحی زیاد استفاده میکنیم و میتوانیم جای عناصر را خودمان تعیین کنیم

پنج مقدار موقعیت مختلف وجود دارد:

  • static
  • relative
  • fixed
  • absolute
  • sticky

یک عنصر با موقعیت: static به هیچ طریق خاصی قرار نمی گیرد. همیشه مطابق با جریان عادی صفحه قرار می گیرد.این موقعیت به صورت پیش فرض روی تمام تگ ها میباشد:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

 

یک عنصر با موقعیت: relative نسبت به موقعیت طبیعی خود قرار می گیرد.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

 

یک عنصر با موقعیت: fixed نسبت به Viewport قرار دارد، به این معنی که همیشه در همان مکان باقی می ماند حتی اگر صفحه اسکرول شود. از ویژگی های بالا، راست، پایین و چپ برای قرار دادن عنصر استفاده می شود.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

 

عنصر با موقعیت: absolute نسبت به نزدیکترین جد قرار گرفته قرار می گیرد (به جای قرار گرفتن نسبت به نمای دید، مانند ثابت).

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

 

یک عنصر با موقعیت: sticky بر اساس موقعیت اسکرول کاربر قرار می گیرد.

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

 

The z-index Property

خصوصیت z-index ترتیب پشته یک عنصر را مشخص می کند (که کدام عنصر باید در جلو یا پشت بقیه قرار گیرد).این خصوصیت هم بسیار کمک کننده است و باید مفهوم آن را متوجه شوید

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px; 
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

 

CSS Overflow

ویژگی Overflowمشخص می‌کند که وقتی محتوای یک عنصر بزرگتر از آن است که در ناحیه مشخص شده قرار بگیرد، محتوا بریده شود یا نوارهای پیمایش اضافه شود.

  • visible - Default. The overflow is not clipped. The content renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
  • auto - Similar to scroll, but it adds scrollbars only when necessary
div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

 




div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

 

CSS Layout - float and clear

ویژگی float CSS نحوه شناور شدن یک عنصر را مشخص می کند.

  • left - The element floats to the left of its container
  • right - The element floats to the right of its container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit - The element inherits the float value of its parent
img {
  float: right;
}
<html>
<head>
<style>
div {
 float: left;
 padding: 15px; 
}
.div1 {
 background: red;
}
.div2 {
 background: yellow;
}
.div3 {
 background: green;
}
</style>
</head>
<body>
<h2>Float Next To Each Other</h2>
<p>In this example, the three divs will float next to each other.</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>

 

 

 

جداول-css-tables (جلسه قبل)
جهت دهی عناصر یا Align (جلسه بعد)

دوره های اخیر